<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="input">
        <span id="text"></span>
    </div>
    <script>
        // vue2和vue3双向数据绑定原理？

        // object.defineProperty
        // var obj={}
        // // 是监听单个属性
        // Object.defineProperty(obj, "name",{
        //     get:function(){
        //         console.log("获取了什么");
        //     },
        //     set: function(value) {
        //         console.log("设置了某些属性",value);
        //     }
        // })
        //  obj.name = "23"
        // console.log(obj.name);

        // 双向数据绑定原理
    //     var obj={}
    //     Object.defineProperty(obj, "prop",{
    //         get:function(){
    //             return val;
    //         },
    //         set:function(newval){
    //             val=newval
    //             // 获取元素 将它赋值
    //             document.getElementById("text").innerHTML=val
    //         }
    //     })
    //    document.addEventListener('keyup',function(e) {
    //     obj.prop=e.target.value
    //    })
    //    var obj={}
    //     Object.defineProperty(obj, "prop",{
    //         get:function(){
    //             return val;
    //         },
    //         set:function(newval){
    //             val=newval
    //             // 获取元素 将它赋值
    //             document.getElementById("text").innerHTML=val
    //         }
    //     })
    //    document.addEventListener('keyup',function(e) {
    //     obj.prop=e.target.value
    //    })

    // vue3数据绑定原理
    var obj={}
    var  obj1=new Proxy(obj,{
        get:function(target,key,receiver) {
            return target[key]
        },
        set:function(target, key,newVal,receiver) {
            // 添加新值
            target[key] = newVal;
            document.getElementById("text").innerHTML=target[key]
        }
    })
    document.addEventListener('keyup',function(e) {
        console.log(obj1);
        obj1[0]=e.target.value
    })
    // vue2 监听是一个属性 当数据发生变化时 视图是不会发生改变  vue3监听的是一个对象 
    </script>
</body>
</html>